
<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <main class="page">
        <!--轮播图-->
        <div class="layout clearfix" style="margin-bottom: 20px;">
            <div class="banner-box fl">
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="(item, index) in BannerList" :key="index">
                        <!-- 轮播图片 -->
                        <el-image :src="item.image" style=""></el-image>
                    </el-carousel-item>
                    
                </el-carousel>
            </div>
            <div class="person-box fr">
                <div class="avatar-box">
                    <router-link to="/person">
                        <img :src="UserInfo.avatar" class="avatar" alt="">
                    </router-link>
                </div>
                <div class="nickname">
                    {{UserInfo.nickname}}
                    <span @click="loginOut">登出</span>
                </div>
                <div class="positon">
                    <img class="ico" src="../assets/icon/position-ico.png" alt="">
                    位置：{{UserInfo.province_name}}
                    <img class="qh-ico" src="../assets/icon//position-qh.png" alt="">
                </div>
                <div class="code-box">
                    <div class="img-box">
                        <img :src="wx_code" alt="">
                        <span>官方公众号</span>
                    </div>
                    <div class="img-box">
                        <img :src="wx_code" alt="">
                        <span>官方公众号</span>
                    </div>
                </div>
            </div>
        </div>

        <!--资讯-->
        <div class="wsc-f7f8fa" v-if="newArticles.length">
            <div class="layout articles">
                <div class="layout-title">
                    最新快讯
                    <router-link to="/articles" class="layout-more">查看更多>></router-link>
                </div>
                <ul class="content">
                    <li class="list" v-for="(item, index) in newArticles" :key="index">
                        <router-link :to="'article?id='+item.id" :title="item.title">{{item.title}}</router-link>
                        <span>{{item.date}}</span>
                    </li>
                </ul>
            </div>
        </div>
        

        <!--立即报名-->
        <div class="layout">
            <a class="wsc-poster">
                <img class="poster-img" src="../assets/images/center_advertising.png" alt="">
            </a>
        </div>

        <!-- 左右两列资讯 -->
        <div class="layout flexs">
            <div class="flex-item" v-for="list in cateArticles">
                <div class="flex-title">
                    {{list.name}}
                    <router-link :to="'articles?cid='+list.id" class="flex-more">查看更多>></router-link>
                </div>
                <ul class="content">
                    <li class="list" v-for="(item, index) in list.articles" :key="index">
                        <router-link :to="'article?id='+item.id" :title="item.title">{{item.title}}</router-link>
                        <span>{{item.date}}</span>
                    </li>
                </ul>
            </div>
        </div>
           

        <!--教育优势-->
        <div class="wsc-f7f8fa">
            <div class="layout edu-attrs">
                <div class="layout-title">教育优势</div>
                <div class="content">
                    <div class="item slate5-shadow">
                        <div class="cont">
                            <h4 class="title">在线题库</h4>
                            <p class="desc">大量知识点供你选择</p>
                        </div>
                        <img class="ico" src="../assets/edu-ico/edu-ico-1.png" alt="">
                    </div>
                    <div class="item slate5-shadow">
                        <div class="cont">
                            <h4 class="title">面试课程</h4>
                            <p class="desc">一对一辅导改变弱项</p>
                        </div>
                        <img class="ico" src="../assets/edu-ico/edu-ico-2.png" alt="">
                    </div>
                    <div class="item slate5-shadow">
                        <div class="cont">
                            <h4 class="title">考点直击</h4>
                            <p class="desc">指导历年重点考题</p>
                        </div>
                        <img class="ico" src="../assets/edu-ico/edu-ico-3.png" alt="">
                    </div>
                    <div class="item slate5-shadow">
                        <div class="cont">
                            <h4 class="title">免费试听</h4>
                            <p class="desc">了解授课教师情况</p>
                        </div>
                        <img class="ico" src="../assets/edu-ico/edu-ico-4.png" alt="">
                    </div>
                    <div class="item slate5-shadow">
                        <div class="cont">
                            <h4 class="title">智能教学</h4>
                            <p class="desc">学情分析找到薄弱环节</p>
                        </div>
                        <img class="ico" src="../assets/edu-ico/edu-ico-5.png" alt="">
                    </div>
                    <div class="item slate5-shadow">
                        <div class="cont">
                            <h4 class="title">随时随地</h4>
                            <p class="desc">任意时间，任意地点</p>
                        </div>
                        <img class="ico" src="../assets/edu-ico/edu-ico-6.png" alt="">
                    </div>
                    <div class="item slate5-shadow">
                        <div class="cont">
                            <h4 class="title">时事政治</h4>
                            <p class="desc">热门讯息以及推荐</p>
                        </div>
                        <img class="ico" src="../assets/edu-ico/edu-ico-7.png" alt="">
                    </div>
                    <div class="item slate5-shadow">
                        <div class="cont">
                            <h4 class="title">考试快讯</h4>
                            <p class="desc">最新考试、招聘等消息</p>
                        </div>
                        <img class="ico" src="../assets/edu-ico/edu-ico-8.png" alt="">
                    </div>
                </div> 
            </div>
        </div>
        
       
        <!--师资团队-->
        <div class="layout teachers">
            <div class="layout-title">
                师资团队
                <a href="" class="layout-more">查看更多>></a>
            </div>
            <ul class="content">
                <li class="item" v-for="(item, index) in TeacherList" :key="index">
                    <div class="info">
                        <img class="avatar" :src="item.avatar" alt="">
                        <p class="title">{{item.learn}}</p>
                        <p class="name">{{item.name}}</p>
                    </div>
                    <div class="intro">{{item.intro}}</div>
                    <div class="text-center">
                        <a href="" class="link">课程详情</a>
                    </div> 
                </li>
            </ul>
        </div>

        <!--好课推荐-->
        <div class="wsc-f7f8fa">
            <div class="layout videos">
                <div class="layout-title">
                    好课推荐
                    <a href="" class="layout-more">查看更多>></a>
                </div>
                <div class="content">
                <a href="" class="item slate5-shadow" v-for="(item, index) in VideoList" :key="index">
                    <div class="replay-box">
                        <img class="img" :src="item.img" alt="">
                        <div class="replay-cover"></div>
                    </div> 
                    <div class="title">{{item.title}}</div>
                </a>
            </div>
            </div>
        </div>

        <!-- 友情链接 -->
        <div class="layout friends">
            <div class="layout-title">
                常用链接
            </div>
            <div class="content">
                <a :href="item.url" target="_blank" class="item slate5-shadow" v-for="(item, index) in FriendsList" :key="index">
                    <img class="logo" :src="item.logo" alt="">
                    <span class="txt">{{item.name}}</span>
                </a>
            </div>
        </div> 
    </main>
</template>
<script>
import Api from "@/Api.js";
export default {
    data() {
        return {
            wx_code: '',
            UserInfo:{},
            HomeList: [],
            //轮播图
            BannerList: [],
            //友情链接
            FriendsList: [],
            //最新快讯
            newArticles: [],
            cateArticles: [],
            TeacherList: [],
            VideoList: [
                {
                    id: 1,
                    img:'https://pic.huke88.com/video/cover/2022-07-21/D3463880-4513-CD20-F290-D020E7B9279C.jpg!/fwfh/580x360/quality/100/unsharp/true/format/jpg',
                    title: 'Excel基本操作究竟有多强大',
                }, {
                    id: 1,
                    img:'https://pic.huke88.com/video/cover/2022-07-21/D3463880-4513-CD20-F290-D020E7B9279C.jpg!/fwfh/580x360/quality/100/unsharp/true/format/jpg',
                    title: 'Excel基本操作究竟有多强大',
                }, {
                    id: 1,
                    img:'https://pic.huke88.com/video/cover/2022-07-21/D3463880-4513-CD20-F290-D020E7B9279C.jpg!/fwfh/580x360/quality/100/unsharp/true/format/jpg',
                    title: 'Excel基本操作究竟有多强大',
                }, {
                    id: 1,
                    img:'https://pic.huke88.com/video/cover/2022-07-21/D3463880-4513-CD20-F290-D020E7B9279C.jpg!/fwfh/580x360/quality/100/unsharp/true/format/jpg',
                    title: 'Excel基本操作究竟有多强大Excel基本操作究竟有多强大',
                }, {
                    id: 1,
                    img:'https://pic.huke88.com/video/cover/2022-07-21/D3463880-4513-CD20-F290-D020E7B9279C.jpg!/fwfh/580x360/quality/100/unsharp/true/format/jpg',
                    title: 'Excel基本操作究竟有多强大',
                }, {
                    id: 1,
                    img:'https://pic.huke88.com/video/cover/2022-07-21/D3463880-4513-CD20-F290-D020E7B9279C.jpg!/fwfh/580x360/quality/100/unsharp/true/format/jpg',
                    title: 'Excel基本操作究竟有多强大',
                }, {
                    id: 1,
                    img:'https://pic.huke88.com/video/cover/2022-07-21/D3463880-4513-CD20-F290-D020E7B9279C.jpg!/fwfh/580x360/quality/100/unsharp/true/format/jpg',
                    title: 'Excel基本操作究竟有多强大',
                }, {
                    id: 1,
                    img:'https://pic.huke88.com/video/cover/2022-07-21/D3463880-4513-CD20-F290-D020E7B9279C.jpg!/fwfh/580x360/quality/100/unsharp/true/format/jpg',
                    title: 'Excel基本操作究竟有多强大Excel基本操作究竟有多强大',
                }
            ],
            message: [],
            recommendedVideo: [],
        }
    },
    methods: {
        //数据填充
        GetInitData() {
            let that = this;
            Api.Config.GetInit().then((res) => {
                if (res.data.code == 1) {
                    that.wx_code = res.data.data.wx_code;
                    that.UserInfo = res.data.data.userinfo;
                    that.TeacherList = res.data.data.teacher;
                    that.BannerList = res.data.data.banner;
                    that.FriendsList = res.data.data.friends;
                    that.newArticles = res.data.data.new_articles;
                    that.cateArticles = res.data.data.cate_articles;
                }
            })
        },
        //退出登录
        loginOut() {
            let that = this;
            Api.User.UserLogout().then((res) => {
                if (res.data.code == 1) {
                    localStorage.removeItem('userToken');
                    localStorage.removeItem('loginStatus');
                    window.location.reload();
                }
            })
        },
    },
    mounted() {
        this.GetInitData();
    },
}
</script>
<style scoped lang="less">
/* scoped 让style样式 局部生效*/
.page{
  padding: 10px 0;
}

.banner-box{
    width: 835px;
    height: 425px;
}

:deep(.el-carousel__container){
    height: 425px!important;
}

.person-box{
    width: 350px;
    height: 425px;
    background: #6f7071;
    padding: 20px;
}

.person-box .avatar-box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.person-box .avatar-box a{
    display: block;
}

.person-box .avatar-box .avatar{
    width: 80px;
    height: 80px;
    border-radius: 80px;
    border: 2px solid #ffffff;
}

.person-box .nickname{
    margin-top: 5px;
    color: #ffffff;
    text-align: center;

    span{
        cursor: pointer;
        color: #f9d27d;
        font-size: 14px;
        text-decoration: underline;
    }
}

.person-box .positon{
    margin-top: 10px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.person-box .positon .ico{
    width: 20px;
    height: auto;
    margin-right: 5px;
}

.person-box .positon .qh-ico{
    width: 20px;
    height: auto;
    margin-left: 5px;
    cursor: pointer;
}

.person-box .code-box{
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-box .code-box .img-box{
    margin: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.person-box .code-box .img-box img{
    background: #cccccc;
    width: 120px;
    height: 120px;
}

.person-box .code-box .img-box span{
    margin-top: 20px;
    color: #ffffff;
}

// 资讯
.articles{
    padding: 35px 0;

    .content{
        border: 1px solid #CDCDCD;
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style-type: none;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 10px 0;
        background: #ffffff;
    }

    .list{
        box-sizing: border-box;
        width: 50%;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        span{
            font-size: 14px;
            min-width: 60px;
            text-align: right;
        }

        a{
            text-decoration: none;
            font-size: 14px;
            color: #333333;
            flex: 1;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    }

    .list:hover span,
    .list:hover a{
        color: #D11A2D;
    }
}

// 立即报名
.wsc-poster{
    margin: 30px 0 0;
    display: block;
    cursor: pointer;

    .poster-img{
        width: 100%;
        height: auto;
    }
}

// 教育优势
.edu-attrs{
    padding: 35px 0;

    .content{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .item{
        width: 282px;
        background: #ffffff;
        padding: 20px;
        border-radius: 5px;
        height: 160px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        cursor: pointer;
    }

    .cont{
        width: 142px;
        text-align: left;

       .title{
            font-size: 20px;
            line-height: 40px;
            margin: 0;
       }

       .desc{
            margin: 0;
            height: 50px;
            font-size: 16px;
            color: #999999;
       }
    }

    .ico{
        margin-left: 10px;
        width: 90px;
        height: 90px;
    }
}

// 师资团队
.teachers{
    padding: 30px 0;

    .content{
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        list-style-type: none;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 10px 0;
    }

    .item{
        width: 342px;
        border-radius: 5px;
        background: #252930;
        border: 1px solid #CDCDCD;
        padding: 30px 20px;
    }

    .info{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .avatar{
        width: 100px;
        height: 100px;
        border-radius: 100px;
        margin-bottom: 10px;
    }

    .title{
        color: #999999;
        margin: 0;
        line-height: 30px;
    }

    .name{
        color: #ffffff;
        margin: 0;
        line-height: 30px;
    }

    .intro{
        height: 90px;
        color: #999999;
        font-size: 14px;
        line-height: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }

    .link{
        margin-top: 15px;
        display: inline-block;
        width: 120px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        border-radius: 5px;
        background: #191c21;
        color: #dddddd;
        transition: all 0.2s;
        text-decoration: none;
    }

    .link:hover{
        color: #191c21;
        background: #dddddd;
    }
}

// 好课推荐
.videos{
    padding: 30px 0;

    .content{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

    .item{
        width: 282px;
        display: block;
        border-radius: 5px;
        overflow: hidden;
        background: #ffffff;
        text-decoration: none;
        margin-bottom: 20px;
        border: 1px solid #eeeeee;
    }

    .replay-box{
        width: 282px;
        height: 170px;
        position: relative;

        .replay-cover{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.35);
            opacity: 0;
            transition: all .25s;
        }

        .replay-cover:before {
            content: '';
            position: absolute;
            left: 50%;
            top: 55%;
            margin: -30px 0 0 -30px;
            width: 60px;
            height: 60px;
            transition: all .25s;
            background-image: url(../assets/icon/replay.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
        }
    }

    .item:hover .replay-cover {
        opacity: 1
    }
    
    .item:hover .replay-cover:before {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    .img{
        width: 282px;
        height: 170px;
        object-fit: cover;
    }
    
    .title{
        padding: 0 10px;
        text-decoration: none;
        color: #333333;
        font-size: 16px;
        line-height: 40px;
        height: 50px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }

    .title:hover{
        color: #D11A2D;
    }
}

// 左右两列资讯
.flexs{
    display: flex;
    align-items: start;
    justify-content: space-between;
    table-layout: fixed;
    padding: 40px 0;

    .flex-item{
        display: table-cell;
        width: 585px;
        border-radius: 5px;
        border: 1px solid #eeeeee;
    }

    .flex-title{
        padding: 15px 20px;
        font-size: 20px;
        color: #D11A2D;
        font-weight: 700;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f7f8fa;
    }

    .flex-more{
        color: #999999;
        font-size: 14px;
        text-decoration: none;
        font-weight: normal;
    }

    .flex-more:hover{
        color: #666666;
    }

    .content{
        margin: 0;
        padding: 10px 0;
        list-style-type: none;
        justify-content: space-between;
        box-sizing: border-box;
        background: #ffffff;
    }

    .list{
        box-sizing: border-box;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        
        span{
            font-size: 14px;
            min-width: 60px;
            text-align: right;
        }

        a{
            text-decoration: none;
            font-size: 14px;
            color: #333333;
            flex: 1;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    }

    .list:hover span,
    .list:hover a{
        color: #D11A2D;
    }
}

// 友情链接
.friends{
    padding: 30px 0;

    .content{
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
    }

    .item{
        box-sizing: border-box;
        width: 25%;
        margin-bottom: 15px;
        padding: 10px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .logo{
        width: 60px;
        margin-right: 20px;
    }

    .txt{
        font-size: 16px;
        color: #333;
    }
}

</style>